<template>
  <a-form :model="formState" style="" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
          autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
    <a-form-item label="Username" name="username" :rules="[{ required: true, message: '请输入用户名！' }]">
      <a-input v-model:value="formState.username" style="width: 250px"/>
    </a-form-item>

    <a-form-item label="Password" name="password" :rules="[{ required: true, message: '请输入密码！' }]">
      <a-input-password v-model:value="formState.password" style="width: 250px"/>
    </a-form-item>

    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import {reactive} from 'vue';
import {useRouter} from 'vue-router';
import {notification} from 'ant-design-vue';
import {SmileOutlined} from '@ant-design/icons-vue';
import {setAuthToken} from '../../../src/utils/auth.js';
import {h} from 'vue';

const router = useRouter();

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const formState = reactive<FormState>({
  username: 'admin',
  password: 'admin',
  remember: true
});
const onFinish = (values: FormState) => {
  console.log('Success:', values);
  if (values.username === 'admin' && values.password === 'admin') {
    setAuthToken(values.username);
    notification.open({
      message: '登录成功',
      description: '欢迎业主' + values.username + ' 回家~! 为业主保驾护航！！',
      icon: () => h(SmileOutlined, {style: 'color: #108ee9'})
    });
    router.push('/master');
  } else {
    notification.open({
      message: '登录失败',
      description: '用户名或密码错误~!',
      icon: () => h(SmileOutlined, {style: 'color: #108ee9'})
    });
  }

  console.log('Success:', values.password);
};

const onFinishFailed = (errorInfo: FormState) => {
  console.log('Failed:', errorInfo);
};
</script>
